<template>
	<div class="w1024-wrap">
		<div class="page">
			<div class="head">
				<!--<div class="tab-panel clear">
					<p class="tab-item" @click="groupTypeChange(1)" :class="searchData.circletype==1?'selected-item':''">统付</p>
					<p class="tab-item" @click="groupTypeChange(2)" :class="searchData.circletype==2?'selected-item':''">个付</p>
				</div>-->
				<div class="tab-panel clear ">
					<p class="tab-item status-item" @click="statusChange(1)" :class="searchData.table==1?'selected-item':''">已开通</p>
					<p class="tab-item status-item" @click="statusChange(2)" :class="searchData.table==2?'selected-item':''">快到期</p>
					<p class="tab-item status-item" @click="statusChange(3)" :class="searchData.table==3?'selected-item':''">已到期</p>
				</div>
				<div class="search-wrap">
					<div class="clear">
						<div class="form-item left">
							<p class="form-item-title">开始时间：</p>
							<div class="form-item-content">
								<el-date-picker clearable v-model="searchData.starttime" value-format="yyyy-MM-dd" type="date" placeholder="请选择">
								</el-date-picker>
							</div>
						</div>
						<div class="form-item left">
							<p class="form-item-title">结束时间：</p>
							<div class="form-item-content">
								<el-date-picker clearable v-model="searchData.endtime" value-format="yyyy-MM-dd" type="date" placeholder="请选择">
								</el-date-picker>
							</div>
						</div>
					</div>
					<div class="clear">
						<div class="form-item left">
							<p class="form-item-title">运营商：</p>
							<div class="form-item-content">
								<el-select clearable v-model="searchData.merchant" placeholder="请选择">
									<el-option key="1" label="电信" value="1"></el-option>
									<el-option key="2" label="移动" value="2"></el-option>
									<el-option key="3" label="联通" value="3"></el-option>
								</el-select>
							</div>
						</div>
						<div class="form-item left">
							<p class="form-item-title">名称/号码：</p>
							<div class="form-item-content">
								<el-input clearable v-model="searchData.phone" placeholder="请输入集团名称/成员号码"></el-input>
							</div>
						</div>
						<div class="form-item left">
							<el-button type="primary" @click="search">查询</el-button>
						</div>
					</div>
				</div>
			</div>

			<template v-if="list.length">
				<div class="table-wrap">
					<el-table v-loading="loading" size="middle" :data="list" style="width: 100%">
						<el-table-column prop="phone" label="成员号码"></el-table-column>
						<el-table-column prop="merchant" label="运营商">
							<template slot-scope="scope">
								<span v-if="scope.row.merchant==1">电信</span>
								<span v-if="scope.row.merchant==2">移动</span>
								<span v-if="scope.row.merchant==3">联通</span>
							</template>
						</el-table-column>
						<el-table-column prop="circlename" label="所属集团"></el-table-column>
						<el-table-column prop="opentime" label="开通时间"></el-table-column>
					</el-table>
				</div>
				<el-pagination :current-page="this.searchData.pagenow" class="text-center" layout="prev, pager, next,sizes" prev-text="上一页" next-text="下一页" @size-change="pageSizeChange" @current-change="currentPageChange" :total="totalCount">
				</el-pagination>
			</template>
			<no-data v-if="!loading&&!list.length"></no-data>
		</div>
	</div>
</template>

<script>
	import NoData from '@/components/NoData'
	export default {
		name: 'NumberManage',
		components: {
			NoData,
		},
		data() {
			return {
				loading: false,
				totalCount: 0,
				searchData: {
					pagenow:1,
					shownum:10,
					circletype: 1,
					table: 1,
					starttime: '',
					endtime: '',
					merchant: ''
				},
				list: [],
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			groupTypeChange(index) {
				if(this.searchData.circletype == index) {
					return
				}
				this.searchData.circletype = index
				this.searchData.table = 1
				this.search()
			},
			statusChange(index) {
				if(this.searchData.table != index) {
					this.searchData.table = index
					this.search()
				}
			},
			pageSizeChange(pageSize) {
				this.searchData.shownum = pageSize
				this.getData()
			},
			currentPageChange(page) {
				this.searchData.pagenow = page
				this.getData()
			},
			search() {
				this.searchData.pagenow=1
				this.getData()
			},
			getData() {
				this.loading=true
				this.searchData.starttime=this.searchData.starttime||''
				this.searchData.endtime=this.searchData.endtime||''
				this.$request.queryPhoneList(this.searchData)
					.then(res => {
						if(res.code==0){
							this.list=res.phoneList
							this.totalCount=res.page.totalresult
						}else{
							this.msgError(res.msg)
						}
						this.loading=false
					})
			},

		}
	}
</script>

<style scoped lang="scss">
	.head {
		border-bottom: 10px solid #f5f5f5;
		.tab-panel {
			height: 62px;
			background: #fff;
			border-bottom: 2px solid #f5f5f5;
			.tab-item {
				width: 120px;
				height: 60px;
				text-align: center;
				float: left;
				margin-right: 20px;
				font-size: 16px;
				color: #333;
				cursor: pointer;
				line-height: 60px;
			}
			.status-item {
				width: 100px;
			}
			.selected-item {
				color: #0088EA;
				border-top: 2px solid #0088EA;
				line-height: 56px;
			}
		}
		.search-wrap {
			padding: 16px 30px 8px;
			background: #fff;
			margin-bottom: 10px;
			.el-date-editor.el-input,
			.el-date-editor.el-input__inner {
				width: 100%;
			}
		}
	}
</style>